<template>
	<view class="container">
		<view class="cut"></view>
		<view class="header">
			<image v-if="[
				'offline_ebit',
				 'online_ebit'].includes(data.category)" src="../../static/images/center/yue.png"
			 mode=""></image>
			<image v-if="['seller_extract'].includes(data.category) && data.status != -1" src="../../static/images/center/yue.png"
			 mode=""></image>
			<image v-if="[
			 	'seller_promotion_user',
				'shell_transfer_user',
				'offline_consume_refound_black_shell'].includes(data.category)"
			 src="../../static/images/center/adsf.png" mode=""></image>
			<image v-if="['offline'].includes(data.category) && data.status != -1" src="../../static/images/center/adsf.png"
			 mode=""></image>
			<image v-if="['shell_extract_refund','refound_balance','seller_extract','offline'].includes(data.category) && data.status == -1"
			 src="../../static/images/public/failIcon.png" mode=""></image>


			<text class="orderType" v-if="data.category == 'offline_ebit'">线下经营收益</text>
			<text class="orderType" v-if="data.category == 'online_ebit'">线上经营收益</text>
			<text class="orderType" v-if="data.category == 'seller_promotion_user'">推广收入</text>
			<text class="orderType" v-if="data.category == 'offline' && data.status == 1">贝壳提现</text>
			<text class="orderType" v-if="data.category == 'seller_extract' && data.status == 1">余额提现</text>
			<text class="orderType" v-if="data.category == 'shell_transfer_user'">贝壳兑换</text>
			<text class="orderType" v-if="data.category == 'offline_consume_refound_black_shell'">用户消费获得</text>
			<text class="orderType" v-if="['shell_extract_refund','refound_balance','seller_extract','offline'].includes(data.category) && data.status == -1">提现失败</text>
			<text class="money">{{data.em}}{{data.true_money||""}}</text>
		</view>
		<view class="step" v-if="['seller_extract','offline'].includes(data.category) && data.status !== -1">
			<text class="stepTitle">当前进度</text>
			<uni-steps class="stepPro" :options="stepData" active-color="#57BE6A" :active="data.status + 1" direction="column" />
		</view>
		<view class="step" v-if="['shell_extract_refund','refound_balance','seller_extract','offline'].includes(data.category) && data.status == -1">
			<text class="stepTitle" style="min-width: 220rpx;color: red;">失败原因</text>
			<text style="color: red;">{{data.fail_msg}}</text>
		</view>
		<!-- 线下经营收益 -->
		<view class="content" v-if="[
				'offline_ebit'].includes(data.category)">
			<view class="cell">
				<text class="title">用户昵称</text>
				<text class="value">{{data.nickname}}</text>
			</view>
			<view class="cell">
				<text class="title">消费金额</text>
				<text class="value">{{data.total_price}}</text>
			</view>
			<view class="cell">
				<text class="title">消费说明</text>
				<text class="value">{{data.mark}}</text>
			</view>
		</view>
		<!-- 贝壳兑换 -->
		<view class="content" v-if="[
				'shell_transfer_user'].includes(data.category)">
			<view class="cell">
				<text class="title">兑换数量</text>
				<text class="value">{{data.true_money}}</text>
			</view>
			<view class="cell">
				<text class="title">消费说明</text>
				<text class="value">{{data.mark}}</text>
			</view>
		</view>
		<!-- 线上经营收益 推广收入 用户消费获得-->
		<view class="content" v-if="[
				'online_ebit',
				'seller_promotion_user',
				'offline_consume_refound_black_shell'].includes(data.category)">
			<!-- <view class="cell">
				<text class="title">用户昵称</text>
				<text class="value">{{data.nickname}}</text>
			</view> -->
			<view class="cell">
				<text class="title">消费金额</text>
				<text class="value">{{data.total_price}}</text>
			</view>
			<view class="cell">
				<text class="title">入账状态</text>
				<text class="value" v-if="data.status == 0">待入账</text>
				<text class="value" v-if="data.status == 1">已入账</text>
			</view>
			<view class="cell">
				<text class="title">消费说明</text>
				<text class="value">{{data.mark}}</text>
			</view>
		</view>
		<!-- 贝壳提现 -->
		<view class="content" v-if="[
			'shell_extract_refund',
			'refound_balance',
				'offline',
				'seller_extract'].includes(data.category)">
			<view class="cell">
				<text class="title" v-if="data.category == 'offline'||data.category == 'shell_extract_refund'">提现贝壳数量</text>
				<text class="title" v-if="data.category == 'seller_extract'||data.category == 'refound_balance'">提现余额</text>
				<text class="value">{{data.true_money}}</text>
			</view>
			<view class="cell" v-if="[
			'shell_extract_refund',
				'offline'].includes(data.category)">
				<text class="title">实际到账金额</text>
				<text class="value">￥ {{(Number(data.true_money) - Number(data.service_fee)).toFixed(2)}}</text>
			</view>
			<view class="cell">
				<text class="title">手续费</text>
				<text class="value">￥ {{data.service_fee}}</text>
			</view>
			<view class="cell">
				<text class="title">消费说明</text>
				<text class="value">{{data.mark}}</text>
			</view>
		</view>

		<view class="content">
			<view class="cell">
				<text class="title">订单编号</text>
				<text class="value">{{data.link_id}}</text>
			</view>
			<view class="cell">
				<text class="title">订单时间</text>
				<text class="value">{{data.add_time}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import utils from '@/utils/util.js'
	import uniSteps from '@/components/uni-steps/uni-steps.vue'
	export default {
		components: {
			uniSteps
		},
		data() {
			return {
				// 				type :0订单获得余额1充值，2提现，3抵扣，4消费获得，5积分兑换，6收到贝壳，7赠送贝壳，8定期贝壳转换9下级消费获得，10黑贝壳兑换
				// 				cate:1余额2贝壳
				active: 2,
				stepData: [{
					title: '发起提现',
					desc: '2020-05-05 22:22:22'
				}, {
					title: '处理中',
					desc: ''
				}, {
					title: '到账成功',
					desc: ''
				}],
				iconGroup: [{
					src: "../../static/images/center/yue.png"
				}],
				iconIdx: 0,
				data: {

				}
			};
		},
		onLoad(options) {
			this.data = JSON.parse(decodeURIComponent(options.item))
			if (['seller_extract', 'offline'].includes(this.data.category)) {
				this.stepData[0].desc = this.data.add_time
			}
		},
		methods: {}
	};
</script>

<style lang="scss" scoped>
	.container {
		padding: 0 30rpx;

		.cut {
			margin-left: -30rpx;
			width: 750rpx;
			height: 10rpx;
			background-color: #eee;
		}

		.header {
			height: 393rpx;
			box-sizing: border-box;
			padding: 70rpx 0 60rpx;
			border-bottom: 1rpx solid #eee;

			image {
				display: block;
				width: 120rpx;
				height: 120rpx;
				border-radius: 60rpx;
				background-color: $theme-color;
				margin: 0 auto 30rpx;
			}

			.orderType {
				display: block;
				text-align: center;
				font-size: 26rpx;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
			}

			.money {
				margin-top: 30rpx;
				display: block;
				text-align: center;
				font-size: 26rpx;
				font-size: 50rpx;
				font-weight: bold;
				color: rgba(51, 51, 51, 1);
			}
		}

		.step {
			padding: 40rpx 0;
			display: flex;
			border-bottom: 1rpx solid #eee;

			text {
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(153, 153, 153, 1);
			}

			.stepPro {
				margin-left: 100rpx;
				margin-top: -6px;
			}
		}

		.content {
			margin-top: 30rpx;

			.cell {
				display: flex;
				line-height: 60rpx;

				.title {
					min-width: 220rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(153, 153, 153, 1);
				}

				.value {
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(51, 51, 51, 1);
				}
			}
		}
	}
</style>
